<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8">
		<title>内网IP查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="shortcut icon" href="../../../static/favicon.ico" th:href="@{/favicon.ico}">
		<link href="../../../static/mui/css/mui.min.css" th:href="@{/mui/css/mui.min.css}" rel="stylesheet" />
		<link href="../../../static/mui/css/mui.picker.css" th:href="@{/mui/css/mui.picker.css}" rel="stylesheet" />
		<link href="../../../static/mui/css/mui.poppicker.css" th:href="@{/mui/css/mui.poppicker.css}" rel="stylesheet" />
		<style type="text/css">
			.mui-input-group,
			.mui-table-view {
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>返回
			</button>
			<h1 class="mui-title">内网IP查询</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label id="buildingLabel">建筑物</label>
					<input type="text" v-model="search.building" placeholder="建筑物（楼栋）">
				</div>
				<div class="mui-input-row">
					<label for="room">房间号</label>
					<input type="text" v-model="search.room" class="mui-input-clear" placeholder="房间号（宿舍号）">
				</div>
				<div class="mui-button-row">
					<button type="button" v-on:click="searchIp($event)" v-bind:disabled="btnDisable" class="mui-btn mui-btn-primary mui-icon mui-icon-search mui-right">
		            查询内网IP
		        </button>
				</div>
			</form>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					建筑物<span class="mui-pull-right">{{info.building|defaultValue}}</span>
				</li>
				<li class="mui-table-view-cell">
					房间号<span class="mui-pull-right">{{info.room|defaultValue}}</span>
				</li>
				<li class="mui-table-view-cell">
					IP始地址<span class="mui-pull-right">{{info.ip1|defaultValue}}</span>
				</li>
				<li class="mui-table-view-cell">
					IP终地址<span class="mui-pull-right">{{info.ip2|defaultValue}}</span>
				</li>
				<li class="mui-table-view-cell">
					网关<span class="mui-pull-right">{{info.gw|defaultValue}}</span>
				</li>
				<li class="mui-table-view-cell">
					子网掩码<span class="mui-pull-right">{{info.mask|defaultValue}}</span>
				</li>
				<li class="mui-table-view-cell">
					主DNS<span class="mui-pull-right">{{info.dns1|defaultValue}}</span>
				</li>
				<li class="mui-table-view-cell">
					备用DNS<span class="mui-pull-right">{{info.dns2|defaultValue}}</span>
				</li>
				<li class="mui-table-view-cell" v-html="info.msg">
				</li>
			</ul>

		</div>
		<script src="../../../static/mui/js/mui.min.js" th:src="@{/mui/js/mui.min.js}"></script>
		<script src="../../../static/mui/js/mui.picker.js" th:src="@{/mui/js/mui.picker.js}"></script>
		<script src="../../../static/mui/js/mui.poppicker.js" th:src="@{/mui/js/mui.poppicker.js}"></script>
		<script src="../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

				var app = new Vue({
					el: ".mui-content",
					data: {
						buildingPicker: new mui.PopPicker(),
						search: {
							building: "",
							room: ""
						},
                        btnDisable:false,
						info: {
							id: 0,
							building: "",
							room: "",
							ip1: "",
							ip2: "",
							gw: "",
							mask: "",
							dns1: "",
							dns2: "",
							msg: ""
						},
						building: [{
							value: "1",
							text: '一栋'
						}, {
							value: "2",
							text: '二栋'
						}, {
							value: "3",
							text: '三栋'
						}, {
							value: "4",
							text: '四栋'
						}, {
							value: "5",
							text: '五栋'
						}, {
							value: "6",
							text: '六栋'
						}, {
							value: "7",
							text: '七栋'
						}, {
							value: "8",
							text: '八栋'
						}, {
							value: "9",
							text: '九栋'
						}, {
							value: "10",
							text: '十栋'
						}]
					},
					methods: {
						searchIp: function(evn) {
							mui(evn.target).button('loading');
                            mui.ajax({
                                type:"post",
                                data:app.search,
                                url:"searchIp",
                                async:true,
                                dataType:"json",
                                success:function(data){
                                    /*if(data.code === 0){
                                        app.info = data.bean;
                                        mui.toast(data.msg);
                                    }else {
                                        mui.toast(data.msg);
                                    }*/

                                    app.info = data.bean;
                                    mui.toast(data.msg);

                                    mui(evn.target).button('reset');
                                },
                                error:function(){
                                    mui.toast("加载错误");
                                    mui(evn.target).button('reset');
                                }
                            });
						}
					},
					filters: {
						defaultValue: function(value) {
							if(value === undefined || value === "") {
								return "<空>"
							} else {
								return value;
							}
						}
					},
					mounted: function() {
						this.buildingPicker.setData(this.building);
						var buildingLabel = mui('#buildingLabel');
						mui(document).on('tap', '#buildingLabel', function(e) {
							app.buildingPicker.show(function(items) {
								//	buildingInput.value = JSON.stringify(items[0]);
								app.search.building = items[0].value;
								//返回 false 可以阻止选择框的关闭
								//return false;
							});
						});
					}
				});
		</script>
	</body>

</html>